<template>
  <section class="notification">
    <ul class="list-nav">
      <li
        v-for="item of tabNavList"
        :key="item.value"
        :class="currentTab === item.value ? 'active' : ''"
        @click="changeMsgType(item.value)"
      >
        {{ item.lable }}
      </li>
    </ul>
    <section
      class="list-container"
    >
      <ul
        class="list"
      >
        <msg-item v-for="item of list" :key="item.id" :data="item" />
      </ul>
      <div
        v-loading="loading"
        class="more-loading"
      >
        <div
          v-show="btn_more"
          class="more"
          @click="getMsgList({ more: true })"
        >
          加载更多
        </div>
      </div>
    </section>
  </section>
</template>

<script>
// import component
import MsgItem from '~/components/msg/MsgItem'

export default {
  middleware: 'isSignIn',
  layout: 'self',
  head() {
    return {
      title: '消息'
    }
  },
  components: {
    MsgItem
  },
  data() {
    return {
      btn_more: true,
      loading: false,
      currentTab: 0,
      tabNavList: [{
        lable: '全部',
        value: 0
      }, {
        lable: '评论',
        value: 1
      }, {
        lable: '赞',
        value: 3
      }, {
        lable: '关注',
        value: 4
      }, {
        lable: '其它',
        value: 5
      }],
      list: [],
      pagination: 1
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  mounted() {
    this.getMsgList()
  },
  methods: {
    changeMsgType(val) {
      this.currentTab = val
      this.pagination = 1
      this.list = []
      this.getMsgList()
    },
    async getMsgList({
      offset = this.pagination,
      limit = 20,
      status = null,
      type = this.currentTab,
      more = false
    } = {}) {
      const params = {
        pageNum: offset,
        pageSize: limit,
        status,
        type
      }
      this.loading = true
      this.btn_more = false
      const data = await this.$request({
        context: this,
        method: 'post',
        url: `userNotification/notifications`,
        params
      })
      this.loading = false
      if (!data) return
      if (data.length === 0) {
        this.$message.success('没有更多啦')
        if (!more) {
          this.list = []
        }
        return
      }
      if (data.length === limit) {
        this.btn_more = true
      }
      this.pagination++
      if (more) {
        this.list = [...this.list, ...data]
      } else {
        this.list = data
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/assets/css/public";
  .notification {
  }
</style>
